<template>
  <el-dialog title="代付订单处理" :visible.sync="dialogVisible" width="30%" @opened="dialogOpen">
    <el-form ref='pform' :model="pform" :label-width="formLabelWidth">
      <el-form-item label="转账单号">
        <el-col :span="20"><el-input v-model="pform.transfer_no" clearable placeholder="请输入转账单号" autocomplete="off"></el-input></el-col>
      </el-form-item>
      <el-form-item label="处理状态">
        <el-radio-group v-model="pform.status" size="small">
          <el-radio label="2" border>成功</el-radio>
          <el-radio label="3" border>失败</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="失败原因" v-show="pform.status == '3'">
        <el-col :span="20"><el-input type="textarea" v-model="pform.fail_mark"></el-input></el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="btnCanel">取 消</el-button>
      <el-button type="primary" @click="dispose">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { disposePost, orderBack } from '@/api/paid'
export default {
  props: {
    mData: String,
    value: Boolean
  },
  data () {
    return {
      isAct: false,
      dialogVisible: false,
      formLabelWidth: '120px',
      pform: {
        transfer_no: '',
        status: '2',
        fail_mark: ''
      }
    }
  },
  watch: {
    value (val) {
      this.dialogVisible = val
    },
    dialogVisible (val) {
      this.$emit('input', val)
    }
  },

  methods: {
    dialogOpen () {
      this.$refs.pform.resetFields()
    },
    btnCanel () {
      this.close()
    },
    rulesForm (data) {
      if (this.pform.status === '2') {
        if (!data.length) {
          this.$message.error('请输入转账单号！')
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    dispose () {
      if (this.rulesForm(this.pform.transfer_no)) {
        this.pform.id = this.mData
        disposePost(this.pform)
          .then(res => {
            this.isAct = !this.isAct
            this.$Message.success(res.msg)
            if (this.pform.status === '3') {
              // 询问是否做订单回退处理？
              this.$Modal.confirm({
				    title:'确认信息',
				    content:'订单为失败状态，是否需要回退该订单',
				    okText: '回退',
				    cancelText: '取消',
				    onOk:async()=>{
					orderBack(this.pform.id)
					  .then(res => {
						this.$Message.success(res.msg)
						this.close()
					  })
					  .catch(res => {
						this.$Message.error(res.msg)
					  })
				  }
              })
            } else {
              this.close()
            }
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
      }
    },

    close () {
      this.$refs.pform.resetFields()
      if (this.isAct) this.$emit('submit')
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less">
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal {
    top: 0;
  }
}
</style>
